<template>
  <cl-dialog
    v-model="visible"
    class="shop-add-user"
    width="35%"
    :close-on-click-modal="false"
    title="新增用户"
  >
    <el-card shadow="never">
      <el-form ref="userFormRef" :model="newUserForm" label-width="120px">
        <el-divider content-position="left">用户基本信息</el-divider>
        <el-row>
          <el-col :span="24">
            <el-form-item label="用户名" prop="nickName">
              <el-input v-model="newUserForm.nickName" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="newUserForm.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="newUserForm.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="newUserForm.birthday"
                type="date"
                placeholder="请选择生日"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="newUserForm.remark" type="textarea" placeholder="请输入备注信息" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="submitUserForm">确定</el-button>
      </div>
    </el-card>
  </cl-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useCool } from '/@/cool';

const props = defineProps<{
  modelValue: boolean;
  shopId?: number | null;
}>();

const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  'created': [success: boolean];
}>();

const { service } = useCool();

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

const newUserForm = reactive({
  nickName: '',
  phone: '',
  gender: 0,
  birthday: '',
  remark: ''
});

const userFormRef = ref();

const handleCancel = () => {
  visible.value = false;
  resetForm();
};

const resetForm = () => {
  newUserForm.nickName = '';
  newUserForm.phone = '';
  newUserForm.gender = 0;
  newUserForm.birthday = '';
  newUserForm.remark = '';
};

const submitUserForm = async () => {
  try {
    // 添加店铺ID信息
    const userData = {
      ...newUserForm,
      shopId: props.shopId || null
    };
    
    // 表单验证
      if (!userData.nickName) {
        ElMessage.error('请输入用户名');
        return;
      }
      if (!userData.phone) {
        ElMessage.error('请输入手机号');
        return;
      }
      // 手机号格式验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(userData.phone)) {
        ElMessage.error('请输入正确的手机号格式');
        return;
      }

    // 调用用户创建API
    const res = await service.order.user.addUser(userData);
    ElMessage.success('用户创建成功');
    visible.value = false;
    resetForm();
    emit('created', true);
  } catch (error) {
      ElMessage.error(error.message || '操作失败，请重试');
      console.error('创建用户失败:', error);
    }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>